    <h2>My Heroes</h2>
    <ul class="heroes">
      <li *ngFor=" let hero of heros"   [class.selected] = "hero == selectedHero " (click) = "onSelect(hero)" >
       <span class = "badge" >{{hero.id}} </span>  {{hero.name}}
       <button class="delete" (click) = "delete(hero); $event.stopPropagation()">X</button>
      </li>
    </ul>
    <div >
        <label >名字：</label> <input  #heroname >
        <button (click) = "add(heroname.value) ; heroname.value = '' ">
          add
        </button>
    </div>
    <div *ngIf="selectedHero">
  <h2>
    {{selectedHero.name | uppercase}} is my hero
  </h2>
  <button (click)="gotoDetail()">View Details</button>
</div>